<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            
            display: block;
            margin:auto;

        }
        
        body{
            height: 100vh;
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 竖直居中 */
            align-items: center;
        }
        /* 
        display: flex;   将<body>元素设置为弹性容器。弹性容器使得其子元素可以根据弹性布局的规则进行排列。
        height: 100vh;  设置<body>元素的高度为整个视口的高度（100vh 表示 100% 视口高度）。
        justify-content: center;   水平居中弹性容器内的子元素。在这个例子中，确保图片在水平方向上居中。
        align-items: center;   垂直居中弹性容器内的子元素。这使得图片在竖直方向上也居中。
        display: block;   将图片设置为块级元素。默认情况下，<img>是内联元素，设置为块级元素后可以更好地控制其布局和样式。
        margin: auto;   这个属性使图片在水平方向上自动居中。由于<body>已经被设置为弹性容器并水平和竖直居中子元素，所以当图片设置为块级元素且margin为auto时，它会在水平和竖直方向上都居中显示。
        */

    </style>
</head>
<body>
    <img src="./u=518142128,3033413007&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="" title="丸子的老猪">
</body>
</html>